<template>
    <section class="flex-1">
        <div class="f24 mb20">最新视频</div>
        <div v-for="item in videoList" class="bg-white mb20 ui-border">
            <ui-img :url="item.cover" style="width:300px;height:200px"></ui-img>
            <div class="p20">
                <div class="mb20 f18">
                    {{item.post_title}}
                </div>
                <div class="flex col-center row-between f-color-grey">
                    <div class="flex col-center">
                        <img src="~@/icons/play.png" class="mr10" width="15" height="15">
                        {{item.post_hits}} 次播放
                    </div>
                    <div class="flex col-center">
                        <img src="~@/icons/comment3.png" class="mr10" width="15" height="15">
                        {{item.comment_count}} 次评论
                    </div>
                </div>
            </div>
        </div>
        <ui-empty :data="videoList"></ui-empty>

        <div class="f24 mb20 mt50">测评师观点</div>
        <div v-for="item in viewers" class="bg-white mb20 p40 ui-border">
            <div class=" ui-border-bottom flex col-center pb20 mb20">
                <ui-img :url="item.avatar" size="60px" class="ui-circle bg-grey"></ui-img>
                <span class="f20 ml20">测评师: {{item.username || '匿名'}}</span>
            </div>
            <div>
                <div class="flex col-center mb10">
                    <ui-img :url="item.company_logo" size="40px" class="ui-border mr20"></ui-img>
                    <span class="f18">{{item.company_name}}</span>
                </div>
                <div class="f-bold mb5 f16">{{item.username || '匿名'}}点评:</div>
                <div class="f14 f-color-text">
                    {{item.change_point}}
                </div>
            </div>
        </div>
        <ui-empty :data="viewers"></ui-empty>
    </section>
</template>
<script>
    export default {
        data(){
            return {
                viewers:[],
                videoList:[]
            }
        },
        mounted(){
            // 测评师观点
            this.$http.get('index.php?g=home&m=RecordVideos&a=record_list', {
                params:{
                    page_size:2
                }
            })
            .then(({data})=>{
                // console.log('测评师观点',data)
                if (data.code===1) {
                    this.viewers = data.data
                }
            })


            // 最新视频列表
            this.$http.get('index.php?g=home&m=RecordVideos&a=video_list', {
                params:{
                    page_size:2
                }
            })
            .then(({data})=>{
                // console.log('最新视频列表', data)
                if (data.code==1) {
                    this.videoList = data.data
                }
            })
        },
    }
</script>